<template>
    <div>
        <div>
            价格区间查询
            <el-tag type="success" @click="search(0, 100)">0-100</el-tag>
            <el-tag type="info" @click="search(100, 200)">100-200</el-tag>
            <el-tag type="warning" @click="search(200, 1000)">200-1000</el-tag>
            <el-tag type="danger" @click="search(1000, 'w')">1000+</el-tag>
            <el-input type="Number" style="width:80px;" size="mini" v-model="v1"></el-input>
            -
            <el-input v-model="v2" style="width:80px;" size="mini"></el-input>
            <el-button type="success" size="mini" @click="searchButton">查询</el-button>
        </div>
        <div>
            <el-row>
                <el-col :span="8" v-for="(o, index) in goodsData" :key="index" >
                    <el-card :body-style="{ padding: '0px' }">
                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                            class="image">
                        <div style="padding: 14px;">
                            <span>{{o.title}}</span>
                            <div class="bottom clearfix">
                                <time class="time">{{ o.salePrice }}</time>
                                <el-button type="danger" class="button" @click="buyEvent">加入购物车</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            v1: 0,
            v2: 0,
            goodsData:[]
        }
    },
    methods: {
        //立即购买
        buyEvent(){
            //在立即购买按钮事件里，去判断用户是否登录

            //这个myinfo是随机取的。但是，一定是和登录成功把信息放进去的这个key一样
            var myinfo = localStorage.getItem('myinfo')
            if(myinfo == null){
                this.$message.error('未登录，请先登录')
            }
            else{
                this.$message('已经登录了，可以正常购买')
            }
        },
        login(){
            //let url='/login'
            
            //登录成功，需要把信息保存起来
            localStorage.setItem('myinfo','把我登录成功后，返回的用户信息放入到缓存');
        },
        //查询按钮
        searchButton() {
            //this.$message('这是查询按钮事件，价格区间是：' + this.v1 + '-' + this.v2)
            this.search(this.v1, this.v2)
        },

        //查询方法
        search(value1, value2) {
            //this.$message('这是预订价格，价格区间是：' + value1 + '-' + value2)

            //调用后台API
            let url = 'http://localhost:5266/goods/query?prices=' + value1 + '-' + value2 + '&categoryid='+this.$route.query.categoryid
            //console.log(url)
            this.$http.get(url).then(res=>{
                this.goodsData = res.data
            })
        },
    }
}
</script>